<!--
    名称：手势拖动选择日期-移动端
    邮箱：helang.love@qq.com
    作者：helang
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手势拖动选择日期-移动端</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="lib/mobileSelect.css">
    <script type="text/javascript" src="lib/mobileSelect.min.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            font-size: 16px;
            font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .list{
            margin: 50px 25px 0 25px;
            text-align: center;
        }
        .list>li{
            list-style: none;
            border: #CCCCCC solid 1px;
            height: 32px;
            line-height: 32px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<h2 style="text-align: center;margin: 25px 0;">选择日期插件</h2>
<ul class="list">
    <li id="select_1">选择日期-设置全部参数</li>
    <li id="select_2">选择日期-默认全部参数</li>
    <li id="select_3">选择日期-年月版</li>
    <li id="openSelect1">点我显示第一个选择器</li>
</ul>
<script type="text/javascript" src="selectDate.js"></script>
<script type="text/javascript">
    /*设置全部参数*/
    var select1 = $.selectDate("#select_1",{
        start:1994,
        end:2018,
        select:[2012,2,15],
        title:'这个选择器很秀'
    },function (data) {
        console.log(data);
        $("#select_1").html(data.year+"年"+data.month+"月"+data.day+"日");
    });

    /*默认全部参数*/
    $.selectDate("#select_2",{},function (data) {
        console.log(data);
        $("#select_2").html(data.year+"-"+data.month+"-"+data.day);
    });

    /*只选择年月*/
    $.selectDateSimple("#select_3",{
        start:1994,
        end:2018,
        select:[2012,5]
    },function (data) {
        console.log(data);
    });

    /* 控制第一个选择器显示 */
    $("#openSelect1").click(function () {
        select1.show();

        /*
            更多 mobileSelect 实例API请查看 mobileSelect.js  文档
        */
    });
</script>
</body>
</html>